import { Component, OnInit, Input, ElementRef } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Component({
  selector: 'el-row',
  templateUrl: './row.component.html'
})
export class RowComponent implements OnInit {
  private sanitizer: any;
  private el: any;
  //栅格间隔
  @Input() gutter: number = 0;
  //布局模式，可选 flex，现代浏览器下有效
  @Input() type: string = '';
  //flex 布局下的水平排列方式 start/end/center/space-around/space-between
  @Input() justify: string = 'start';
  //flex 布局下的垂直排列方式 top/middle/bottom
  @Input() align: string = 'top';
  nativeClass: string = ' ';
  constructor(sanitizer: DomSanitizer, el: ElementRef) {
    this.sanitizer = sanitizer;
    this.el = el;
    this.nativeClass += this.el.nativeElement.classList.value;
  }

  ngOnInit(): void {
  }

  justifyClass(): string {
    return this.justify !== 'start' ? " is-justify-" + this.justify : '';
  };


  alignClass(): string {
    return this.align !== 'top' ? " is-align-" + this.align : '';
  };


  gutterStyle(): SafeStyle {
    var /** @type {?} */ styleStr = '';
    if (this.gutter) {
        styleStr += "margin-left: -" + this.gutter / 2 + "px;";
        styleStr += "margin-right: -" + this.gutter / 2 + "px;";
    }
    return this.sanitizer.bypassSecurityTrustStyle(styleStr);
  };
}
